  <style>
  .ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;
  }
  * html .ui-autocomplete {
    height: 100px;
  }
  </style>

<div class="page-title">
  <h2>Transaksi :: Klaim Kartu Garansi</h2>
</div>

<?php 
  $message = $this->session->flashdata('message');
  if ($message) : $div_class = $this->session->flashdata('div_class');
?>
  <div class="<?php $div_class; ?>">
    <?php echo $message; ?>
  </div>
<?php endif; ?>

<div class="box">
  <?php if(validation_errors()) : ?>
    <p class="warning"> <?php echo validation_errors(); ?> </p>
  <?php endif; ?>


    <form action="<?php echo base_url().'index.php/guarantee/save'; ?>" method="post">
    <table class="item-list" style="font-size: 14px">
      <thead>
        <tr>
          <th colspan="2">Informasi Sales dan Partner</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Teritory</td>
          <td><strong><?php echo $territory; ?></strong></td>
        </tr>
        <tr>
          <td>Sales</td>
          <td>
            <select name="sales_id" id="sales-id">
              <option>Pilih Sales</option>
              <?php foreach ($sales as $key) : ?>
                  <option value="<?php echo $key->user_id.';'.$key->user_group_id; ?>" group="<?php echo $key->user_group_caption; ?>"><?php echo $key->user_id.' | '.$key->user_group_caption.' | '.$key->user_name; ?></option>
              <?php endforeach; ?>
            </select>
          </td>
        </tr>
        <tr>
          <td>Partner</td>
          <td><input type="text" name="partner_id" id="partner-id" placeholder="Partner ID/Name" style="width: 300px"></td>
        </tr>
        <tr class="frontliner">
          <td>Frontliner</td>
          <td>
            <!-- <input type="text" name="frontliner_id" id="frontliner-id" placeholder="Frontliner" style="width: 300px"> -->
            <select name="frontliner_id" id="frontliner-id">
              <option value="null">Pilih Frontliner</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>Tanggal Klaim</td>
          <td><input type="text" name="tanggal" id="tanggal" placeholder="mm/dd/yyyy" value="<?php echo date("m/d/Y"); ?>"></td>
        </tr>
        <tr>
          <td>Program Promosi</td>
          <td>
            <select name="program_id" id="program-id">
              <?php 
                foreach ($program as $key) {
                  echo '<option value="'.$key->mvalue.'">'.$key->mdisplay.'</option>';
                }
              ?>
            </select>
          </td>
        </tr>
        <tr>
          <td>Tambah item yang diklaim</td>
          <td>
            <select name="" id="item" style="width:100px">
              <?php 
                for ($i=1; $i <= 10; $i++) { 
                  echo '<option value="'.$i.'">'.$i.'</option>';
                }
              ?>
            </select>
            <button id="tambah-item">Tambah</button>
          </td>
        </tr>
      </tbody>
    </table>

  <!-- For item details to be claimed -->
  <div id="claimed-item">
    <table class="item-list">
      <thead>
        <tr>
          <th>ICCID</th>
          <th>Item Kode</th>
          <th>Nama Produk</th>
          <th>Partner ID</th>
          <th>Sell In Date</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody class="claimed-items">
        <!-- Appended Items from JS goes here -->
      </tbody>
    </table>
    <button id="save-klaim" style="margin-left: 10px; padding: 4px 20px; font-weight: bold">Simpan</button>

    </form>
  </div>
</div>


<script type="text/javascript">
  $(document).ready(function(e){

    $("#claimed-item").hide();
    $("#tanggal").datepicker({ minDate: 0, maxDate: 0 });
    $("#sales-id").focus();
    //----------------------------------------------------------------

    $("#partner-id, #frontliner-id, #tanggal").focus(function(){
      var sales_id = $("#sales-id").val();
      if (!sales_id) 
        {
          alert("Silakan pilih sales terlebih dahulu");
          $("#sales-id").focus();
        }
    });
    //----------------------------------------------------------------
    $("button#save-klaim").click(function(){
      if(!$("#sales-id").val()) 
        { alert("Nama sales tidak boleh kosong"); $("#sales-id").focus(); event.preventDefault(); }
      if(!$("#partner-id").val()) 
        { alert("Channel ID tidak boleh kosong"); $("#partner-id").focus(); event.preventDefault(); }
      if(!$("#program-id").val())
        { alert("Jangan lupa pilih program"); $("#partner-id").focus(); event.preventDefault(); }
    });
    
    //----------------------------------------------------------------
    $( "#partner-id" ).autocomplete({
      source: function (req, res) {
        var _t = $("#sales-id").val().split(';');
        $.post(
            "<?php echo base_url();?>index.php/guarantee/partners/",
            { sales_id: _t[0], user_group_id: _t[1], key:req.term,  },
            function(data) {
              res($.map(data, function(item) {
                return {
                  label: item.channel_id +' '+ item.territory_name,
                  value: item.channel_id
                }
              }))
            }, "json"
          );
        },
        minLength: 6,
        dataType: "json",
        select: function( event, ui ) {
          this.value = ui.item.label;
          get_frontliners(ui.item.value);
        }
    });

    $('#partner-id').keypress(function(event){
      if(event.which==13) 
        { event.preventDefault(); }
    });

    //----------------------------------------------------------------
    var x=1;
    $("#tambah-item").click(function(event){
      event.preventDefault();
      $("#claimed-item").show();
      for (var i = 1; i <= $("#item").val() ; i++) {
        new_row = "<tr align='center' id='row_"+x+"'>"+
          "<td><input type='text' name='iccid[]' value='' size='40' onkeyup='autocomplete_iccid("+x+")' class='iccid' id='iccid_"+x+"' /></td>"+
          "<td class='info_"+x+" item_code_"+x+"' > </td>"+
          "<td class='info_"+x+" item_name_"+x+"' > </td>"+
          "<td class='info_"+x+" channel_"+x+"' > </td>"+
          "<td class='info_"+x+" sell_date_"+x+"' > </td>"+
          "<td id='action_"+x+"' >"+
          "<img src='<?php echo base_url(); ?>file/images/cross-script.png' title='remove' class='remove-row' onclick='remove_row("+x+")' /></td>"+
        "</tr>";
        $('.claimed-items').append(new_row);
        x++;
      };

      $('.iccid').keypress(function(event) {
        if(event.which==13) 
          { event.preventDefault(); }
      });
    });
    //----------------------------------------------------------------


 
  }); // end of document.ready

  function get_frontliners(outlet_id) {
    $('#frontliner-id').empty();
    $('#frontliner-id').append(new Option("Pilih Frontliner",""));
    $.post(
      "<?php echo base_url();?>index.php/guarantee/frontliner/"+outlet_id,
      function(data) {
        $.each(data, function(key, val){
          $('#frontliner-id').append(new Option(val["frontliner_name"],val["outlet_frontliner_id"]));
          });
      }, "json"
    );
  }

  function remove_row(row_id) {
    $('tr#row_'+row_id).remove();
  }

  function autocomplete_iccid(row_id) {
    if ( event.which == 13 ) {
      // validate_single_iccid(row_id);
      $.post(
        "<?php echo base_url();?>index.php/guarantee/validate_item/",
        {sales_id:$("#sales-id").val() , channel_id:$("#partner-id").val() , keyword: $("#iccid_"+row_id).val() }, 
        function(data) {
          if(data.istatus == 'valid') 
          {
            // alert(data.istatus);
            $(".info_"+row_id).text('');
            $(".item_code_"+row_id).text(data.item_code);
            $(".item_name_"+row_id).text(data.item_name);
            $(".channel_"+row_id).text(data.channel_id);
            $(".sell_date_"+row_id).text(data.created_on);
          }
          else 
          {
            var _ss = $("#sales-id").val().split(';');
            $(".info_"+row_id).text();
            alert("Data tidak valid, Item tidak dijual ke "+$("#partner-id").val()+" oleh "+_ss[0]);
          }
        }, "json"
      );
    }
  }

</script>